<script lang="ts" setup>
import type { SysAuthorityVO } from '@/api/authority/authorityType'
import { deleteAuthority, getAuthorityTree, saveAuthority } from '@/api/authority/authorityApi'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'

// 定义响应式数据收集菜单树数据
const authorityTree = ref([])
// 定义控制对话框显示隐藏的变量
const dialogVisible = ref(false)
// 表单实例
const operationFormRef = ref()
// 定义响应式数据设置保存或者更新权限参数
const roleInOrUpReq = reactive({
  // 权限id
  id: null as number | null,
  // 权限名称
  name: '',
  // 父菜单ID
  menuPid: null as number | null,
  // 权限标识
  authority: '',
  // 权限路由
  component: '',
  // 按钮标识
  btnSign: '',
  // 是否隐藏
  hidden: false,
  // 菜单图标
  icon: '',
  // 排序
  sort: 0,
  // 权限类型
  type: 0,
})
// 定义响应式数据收集父菜单id
const parentId = ref<number | null>(null)

// 挂载界面时获取权限树
onMounted(() => {
  getHasAuthorityTree()
})

// 获取权限树数据
async function getHasAuthorityTree() {
  const result: any = await getAuthorityTree()
  if (result.success && result.code === 200) {
    authorityTree.value = result.data
  }
}

// 类型翻译函数
function translateType(type: number): string {
  if (type === 0) {
    return '菜单'
  }
  else if (type === 1) {
    return '按钮'
  }
  else {
    return '未知'
  }
}

// 添加权限按钮点击事件
function addAuthority(row: SysAuthorityVO) {
  // 清空权限参数
  Object.assign(roleInOrUpReq, {
    // 权限id
    id: null as number | null,
    // 权限名称
    name: '',
    // 父菜单ID
    menuPid: null as number | null,
    // 权限标识
    authority: '',
    // 权限路由
    component: '',
    // 按钮标识
    btnSign: '',
    // 是否隐藏
    hidden: false,
    // 菜单图标
    icon: '',
    // 排序
    sort: 0,
    // 权限类型
    type: 0,
  })
  dialogVisible.value = true
  // 设置父菜单id为当前选中 row id
  if (row.id !== undefined) {
    parentId.value = row.id
  }
  else {
    parentId.value = null
  }
}

// 编辑权限按钮点击事件
function updateAuthority(row: SysAuthorityVO) {
  dialogVisible.value = true
  // 收集已有菜单数据放进表单里
  Object.assign(roleInOrUpReq, row)
  // 默认值为 0（菜单）
  roleInOrUpReq.type = row.type !== undefined ? row.type : 0
  // 设置父菜单id为 null 避免更新父节点关联信息导致层级错误
  parentId.value = null
}

// 保存权限按钮事件
async function onSaveRoleAuthority() {
  // 设置父菜单id为当前选中 row id
  roleInOrUpReq.menuPid = parentId.value
  const result: any = await saveAuthority(roleInOrUpReq)
  if (result.success && result.code === 200) {
    // 打印成功日志
    ElMessage({
      message: '操作成功',
      type: 'success',
    })
    // 刷新
    getHasAuthorityTree()
    dialogVisible.value = false
  }
}

// 删除权限按钮事件
async function onDeleteRole(row: SysAuthorityVO) {
  const result: any = await deleteAuthority({ ids: [row.id!] })
  if (result.success && result.code === 200) {
    // 打印成功日志
    ElMessage({
      message: '操作成功',
      type: 'success',
    })
    // 刷新
    getHasAuthorityTree()
    dialogVisible.value = false
  }
}
</script>

<template>
  <el-table
    style="width: 100%"
    row-key="id"
    :border="true"
    :data="authorityTree"
  >
    <el-table-column label="权限名称" prop="name" />
    <el-table-column label="权限标识" prop="authority" />
    <el-table-column label="按钮标识" prop="btnSign" />
    <el-table-column label="排序" prop="sort" />
    <el-table-column label="权限类型">
      <template #default="scope">
        {{ translateType(scope.row.type) }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="350px" align="center">
      <template #default="scope">
        <el-button v-hasButton="`btn.authority.save`" type="primary" :disabled="scope.row.type === 1" @click="addAuthority(scope.row)">
          添加权限
        </el-button>
        <el-button v-hasButton="`btn.authority.save`" type="primary" :disabled="scope.row.menuPid === '0'" @click="updateAuthority(scope.row)">
          编辑
        </el-button>
        <el-popconfirm :title="`确定删除${scope.row.name}吗？`" @confirm="onDeleteRole(scope.row)">
          <template #reference>
            <el-button v-hasButton="`btn.authority.delete`" type="danger" :disabled="scope.row.menuPid === '0'">
              删除
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

  <!-- 新增或者编辑权限对话框 -->
  <el-dialog
    v-model="dialogVisible"
    :title="roleInOrUpReq.id ? '修改权限' : '添加权限'"
  >
    <!-- 表单元素，用于收集新增或者修改权限信息 -->
    <el-form ref="operationFormRef" v-model="roleInOrUpReq">
      <el-form-item label="权限名称">
        <el-input v-model="roleInOrUpReq.name" placeholder="请输入权限名称" />
      </el-form-item>
      <el-form-item label="权限标识">
        <el-input v-model="roleInOrUpReq.authority" placeholder="请输入权限标识" />
      </el-form-item>
      <el-form-item label="权限路由">
        <el-input v-model="roleInOrUpReq.component" placeholder="请输入路由" :disabled="roleInOrUpReq.type === 1" />
      </el-form-item>
      <el-form-item label="按钮标识">
        <el-input v-model="roleInOrUpReq.btnSign" placeholder="请输入按钮标识" :disabled="roleInOrUpReq.type === 0" />
      </el-form-item>
      <el-form-item label="权限图标">
        <el-input v-model="roleInOrUpReq.icon" placeholder="请输入图标" :disabled="roleInOrUpReq.type === 1" />
      </el-form-item>
      <el-form-item label="权限排序">
        <el-input v-model="roleInOrUpReq.sort" placeholder="请输入排序" />
      </el-form-item>
      <el-form-item label="权限类型">
        <el-select v-model="roleInOrUpReq.type" placeholder="请选择权限类型">
          <el-option label="菜单" :value="0" />
          <el-option label="按钮" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否隐藏">
        <el-switch v-model="roleInOrUpReq.hidden" active-text="是" inactive-text="否" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">
          取消
        </el-button>
        <el-button v-hasButton="`btn.authority.save`" type="primary" @click="onSaveRoleAuthority">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>
